<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>vue系列课程之基础入门</title>
</head>
<body>
<div id="app">
    <h1>{{msg}}</h1>

    <!--
        v-for指令:   作用: 用来在页面中实现vue中定义数据的遍历
                    语法: 直接在对应标签上加入v-for指令
                         a.遍历对象: v-for="value,key,index in data中变量名"
                         b.遍历数组: v-for="item(普通类型元素),index in data中变量名"
                         c.遍历数组对象:  v-for="item(对象),index in data中变量名"
                        注意: 在使用v-for 建议尽可能在使用 v-for 时提供 key attribute  key属性唯一
    -->

    <h3>遍历对象</h3>
    <!--下面v-for相当于在定义变量用来接收vue实例中的对象属性,一般都是固定顺序固定写死的，中间的插值表达式则是使用前面的变量-->
<!--    <span v-for="value,key,index in user">   [{{index}} {{key}} {{value}}]  </span>-->
    <span v-for="value in user">   [{{value}}]  </span>

    <h3>遍历数组</h3>
    <ul>
        <li v-for="item,index in schools">{{index+1}}--- {{item}}</li>
    </ul>

    <h4>遍历数组里面对象</h4>
    <table border="1" width="100%">
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>工资</th>
            <th>简介</th>
            <th>操作</th>
        </tr>
        <!--key的属性一定要是唯一值-->
        <tr v-for="user,index in users"  :key="user.id" >
            <td>{{user.id}}</td>
            <td v-text="user.name"></td>
            <td v-html="user.age"></td>
            <td>{{user.salary}}</td>
            <td>{{user.content}}</td>
            <td><a href="">删除</a><a href="">修改</a></td>
        </tr>
    </table>

</div>
</body>
</html>
<!--引入vue.js核心文件-->
<script src="js/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",//代表vue实例作用范围
        data:{    //用来vue实例绑定数据
            msg:"hello vue",
            user:{id:21,name:"xiaochen",age:23,salary:23000.23},//定义一个对象
            schools:["河南校区","北京校区","天津校区"],
            users:[
                {id:21,name:"xiaochen",age:23,salary:23000.23,content:"xiaochen是好人"},
                {id:22,name:"xiaoming",age:23,salary:23000.23,content:"xiaoming是一个好奥特曼"},
                {id:23,name:"xiaosan",age:23,salary:23000.23,content:"xiaosan是一个好姑娘"}
            ]
        },
        methods: { //用来给vue实例定义一些列的相关方法

        }
    });
</script>

